<style>
    .status-div {
        padding: 10px;
        width: 320px;
        margin: auto;
        text-align: center;
        margin-top: 120px;
    }

    .status-div img {
        width: 180px;
    }

    .status-div p {
        margin-top: 24px;
        font-size: 16px;
        color: #0055aa;
        text-align: center;
    }

    .user-header {
        height: 50px;
        background: #fff;
        border: solid 1px #e0e0e0;
        line-height: 50px;
        padding: 0 10px;
        color: #0B90C4;
        font-size: 14px;
    }

    .user-header .time {
        float: right;
        height: 50px;
        line-height: 50px;
        color: #ff7f50;
        font-size: 14px;
    }

    .row {
        position: relative;
        overflow: hidden;
        text-align: center;
        width: 720px;
        margin: auto;
    }

    .row .price-item {
        border: solid 2px #0B90C4;
        font-size: 14px;
        float: left;
        color: #444444;
        width: 160px;
        height: 40px;
        border-radius: 3px;
        text-align: center;
        margin-top: 8px;
    }

    .price-item .unit {
        font-size: 12px;
        color: #ff4e14;
    }

    .price-item .year {
        font-size: 14px;
        color: #444444;
        background: #f0f0f0;
        width: 40px;
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .price-item .price {
        font-size: 18px;
        color: #ff4e14;
        float: left;
        width: 100px;
        line-height: 40px;
    }

    .payments {
        border-radius: 3px;
        border: solid 1px #e0e0e0;
        height: 40px;
        float: left;
        overflow: hidden;
        margin-top: 8px;
        margin-left: 100px;

    }

    .payments .tips {
        font-size: 12px;
        color: #444444;
        background: #f0f0f0;
        height: 40px;
        float: left;
        line-height: 40px;
        padding: 0 10px;
    }

    .payments .pay-item {
        border-left: solid 1px #e0e0e0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        float: left;
        width: 120px;
        font-size: 14px;
        cursor: pointer;

    }

    .pay-item:hover {
        background: #0B90C4;
        color: #fff;
    }

    .pay-item.selected {
        background: #0B90C4;
        color: #fff;
    }

    .pay-qrcode {

        margin-top: 12px;
        margin-bottom: 24px;
    }

    .pay-qrcode .code-title {
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
    }

    .pay-qrcode .qrcode {
        border: solid 1px #e0e0e0;
        width: 240px;
        height: 240px;
        margin: auto;
    }

</style>

<div class="pay-qrcode" id="payqrcode" style="display: none">
    <div class="code-title">请扫描下面的二维码进行支付</div>
    <div class="qrcode" id="qrcode">

    </div>
</div>
<script src="/static/js/qrcode.min.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'layer'], function () {
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;

    });
    var timer = null;

    $(".payments .pay-item").click(function () {
        $(".pay-item").removeClass("selected");

        console.log(type)
        $(this).addClass('selected');
        var type = $(this).data('type');
        loadOrder(type)

    })

    function payOrder(order_id) {

            $.get("{:cmf_url('user/member/payOrder')}",{order_id:order_id}, function (res) {
                console.log(res);
                if (res.code == 1) {
                    $(".pay-qrcode").show()
                    var qrcode = new QRCode("qrcode");
                    qrcode.clear();
                    qrcode.makeCode(res.data.code_url)
                    var order_no = res.data.order_no;
                    // stopTimer()
                    setupTimer(order_no)
                    layer.open({
                        type: 1,
                        title:"订单支付",
                        area: '500px',
                        content:$("#payqrcode")
                    })
                }
            })
    }


    function setupTimer(order_no) {
        setTimeout(function () {
            $.get("{:cmf_url('user/member/checkpay')}", {order_no: order_no}, function (res) {
                if (res.code == 1) {
                    parent.layer.alert('您已成功缴纳会费', function () {
                        parent.layer.closeAll()
                        parent.window.location.reload()
                    });
                } else {
                    setupTimer(order_no)
                }
            })
        }, 1000)
    }

    function detail(id) {
        // layer.open({
        //     type: 2,
        //     content: "{:cmf_url('user/tougao/detail')}?id=" + id,
        //     title:'投稿详情',
        //     area:['80%','480px']
        // })
    }
</script>

